<template>
	<div class="page">
		<div class="login-box">
			<p data-v-032893be class="title" style="height: 70px;">His医院管理系统</p>
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
				<el-form-item prop="account">
					<el-input type="text" prefix-icon="el-icon-user-solid" v-model="ruleForm.account"
						placeholder="请输入账号"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" prefix-icon="el-icon-lock" v-model="ruleForm.password"
						placeholder="请输入密码">
						<i slot="suffix" title="显示密码" style="cursor:pointer;" class="iconfont iconyanjing_kai"></i>
					</el-input>
				</el-form-item>
				<el-form-item class="loginradio" prop="radio">
					<el-row>
						<el-col class="radio" :span="8">
							<el-radio v-model="ruleForm.radio" label="main" value="分诊台">分诊台</el-radio>
						</el-col>
						<el-col class="radio" :span="8">
							<el-radio v-model="ruleForm.radio" label="main2" value="门诊医生">门诊医生</el-radio>
						</el-col>
						<el-col class="radio" :span="8">
							<el-radio v-model="ruleForm.radio" label="main3" value="管理人员">管理人员</el-radio>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')" style="width:100%;">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
	import {
		showMsgTitle
	} from '@/utils/api'
	import {
		showMsgConfirm
	} from '@/utils/api'
	import {
		getRequest
	} from '@/utils/api'
	import {
		postRequest
	} from '@/utils/api'
	import {
		uploadFileRequest
	} from '@/utils/api'
	import {
		putRequest
	} from '@/utils/api'
	import {
		deleteRequest
	} from '@/utils/api'
	import {
		showConstants
	} from '@/utils/api'
	export default {
		data() {
			let account = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入账号"));
				} else {
					callback();
				}
			};
			let validatePass = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					callback();
				}
			};
			return {
				radio: "",
				ruleForm: {
					account: "",
					password: "",
					radio: ""
				},
				rules: {
					account: [{
							required: true,
							message: "请输入账号",
							trigger: "blur"
						},
						{
							validator: account,
							trigger: "blur"
						}
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "blur"
						},
						{
							validator: validatePass,
							trigger: "blur"
						}
					]
				},
			};
		},
		watch: {
			//账号验证btn按钮显示高亮
			ruleForm: {
				handler: function() {
					if (this.ruleForm.account != "" && this.ruleForm.password != "") {
						this.isLog = true;
					} else {
						this.isLog = false;
					}
				},
				deep: true
			}
		},
		methods: {
			//密码判断渲染，true:暗文显示，false:明文显示
			changePass(value) {
				this.visible = !(value === "show");
			},
			submitForm(formName) {
				postRequest('/login', this.ruleForm).then(resp => {
					if (resp.data == "登录成功") {
						alert("欢迎使用his医院管理系统！")
						window.location.href = this.ruleForm.radio;
						this.$router.push('/main');
					} else {
						alert("登录失败，请重新输入！")
					}

				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	$white-bg-color: #ffffff;
	$bg-color: #f7f7f7;
	$btn-color: #409eff;
	.page {
		background-color: $bg-color;
		background-image: url('~@/assets/aa.png');
		background-size: 100% 100%;
		position: absolute;
		width: 100%;
		height: 100%;
		font-size: 16px;
		font-family: "Source Sans Pro", sans-serif;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
		.login-box {
			position: absolute;
			top: 45%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			display: block;
			width: 100%;
			max-width: 400px;
			background-color: $white-bg-color;
			margin: 0;
			padding: 15px 35px;
			box-sizing: border-box;
			// border: solid 1px #ddd;
			border-radius: 0.5em;
			font-family: "Source Sans Pro", sans-serif;
			.title {
				font-size: 20px;
				line-height: 50px;
				font-weight: bold;
				margin: 10px;
				text-align: center;
			}
			/deep/ .el-tabs__header {
				margin: 0 0 30px 0;
			}
			// /deep/ .el-tabs__item {
			//   font-size: 20px;
			//   text-align: center;
			// }
			/deep/ .el-tabs__nav-wrap::after {
				height: 0;
			}
			/deep/ #tab-first::after {
				content: "";
				position: absolute;
				right: 0;
				bottom: 0;
				width: 1px;
				height: 20px;
				background-color: #dcdfe6;
				margin: 8px 0;
				vertical-align: middle;
			}
			.code /deep/ .el-form-item__content {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.code button {
				margin-left: 20px;
				width: 140px;
				text-align: center;
			}
			.el-form-item:last-child {
				margin-bottom: 6px;
			}
			.el-button--primary:focus {
				background: $btn-color;
				border-color: $btn-color;
				color: $white-bg-color;
			}
			/deep/ .el-input__suffix-inner {
				margin-right: 6px;
			}
		}
		.login {
			margin-top: -15px;
			font-size: 12px;
			cursor: pointer;
			text-align: left;
			.gotoRight {
				float: right;
				color: #999999;
				&:hover {
					color: $btn-color;
				}
			}
		}
		.radio.el-col {
			background-color: #FFFFFF;
			line-height: 50px;
		}
	}
</style>
